<script lang="ts" setup>
import { ref, onErrorCaptured } from "vue";
import { useThemeStore } from "@/stores/theme";
const  themeStore = useThemeStore();
console.log("当前主题：", themeStore.theme);

const darkSidebar = ref(false);
const darkHeader = ref(false);
type Theme = "light" | "dark" | "system";
// const currTheme = ref<Theme>(themeStore.theme);
const ThemesList = [
  { name: "light", value: "light", color: "#fff" },
  { name: "blue", value: "blue", color: "#409eff" },
  { name: "green", value: "green", color: "#67c23a" },
  { name: "red", value: "red", color: "#f56c6c" },
  { name: "purple", value: "purple", color: "#8e44ad" },
  { name: "yellow", value: "yellow", color: "#e6a23c" },
  { name: "gray", value: "gray", color: "#909399" },
  { name: "black", value: "black", color: "#000000" },
  { name: "white", value: "white", color: "#ffffff" },
];
const tabBarRef = ref<HTMLElement | null>(null);
const activeTab = ref<string>("外观");
const handleClick = (e: MouseEvent) => {
  console.log(e);
  const target = e.target as HTMLElement;
  const offsetLeft = target?.offsetLeft;
  console.log("点击元素距离父元素左侧的距离:", offsetLeft);
  if (target.tagName !== "SPAN") return;
  if (tabBarRef.value) {
    tabBarRef.value.style.transform = `translateX(${offsetLeft - 12.5}px)`;
  }
  activeTab.value = target.innerText;
};
// 全局错误捕获
onErrorCaptured((err) => {
  console.error("组件错误:", err);
  return false; // 阻止错误继续向上传播
});
const handleThemeClick = (event: MouseEvent) => {
  try {
    const themeElement = (event.target as Element).closest?.(".theme-option");
    if (!themeElement) throw new Error("未找到主题选项元素");
    if (!themeElement) return;
    const theme = themeElement.getAttribute("data-type") as Theme | null;
    console.log("选择的主题:", theme);
    if (theme) {
      localStorage.setItem("theme", theme);
      // currTheme.value = theme;
      themeStore.toggleTheme(theme);
    }
  } catch (error) {
    console.error("主题切换错误:", error);
    // 这里可以添加错误处理UI反馈
  }
};
const toggleThemeColor = (color: string) => {
  themeStore.setTheme(color as Theme);
};
</script>
<template>
  <div class="pos-relative bg-tabbar-theme rounded-sm">
    <span
      class="h-7 leading-7 pos-absolute bg-white/30 rounded-sm tab-indicator-bar"
      ref="tabBarRef"
      style="width: 65px; left: 10px; z-index: 1; transform: translateX(0px); top: 3.5px"
    ></span>
    <div
      class="flex text-sm justify-around py-1 hover:cursor-pointer"
      style="z-index: 2; position: relative"
      @click="handleClick"
    >
      <span class="h-7 leading-7 text-center" style="width: 65px">外观</span>
      <span class="h-7 leading-7 text-center" style="width: 65px">性能</span>
      <span class="h-7 leading-7 text-center" style="width: 65px">配置</span>
      <span class="h-7 leading-7 text-center" style="width: 65px">通用</span>
    </div>
  </div>
  <template v-if="activeTab === '外观'">
    <div class="p-2">
      <h6 class="py-2">
        主题<i class="text-3.5 text-gray-500">({{ themeStore.theme }})</i>
      </h6>
      <div class="flex theme-box" @click="handleThemeClick">
        <div class="item w-1/3">
          <div class="w-[85%] mx-auto">
            <div
              class="border-gray-800/20 rounded-sm text-center py-5 outline-box theme-option"
              :class="themeStore.theme === 'light' ? 'outline-active' : ''"
              data-type="light"
            >
              <span class="i-line-md-sunny-filled-loop text-2xl theme-text"></span>
            </div>
            <span class="block text-center mt-2 text-sm">浅色</span>
          </div>
        </div>
        <div class="item w-1/3">
          <div class="w-[85%] mx-auto">
            <div
              class="border-gray-800/20 rounded-sm text-center py-5 outline-box theme-option"
              :class="themeStore.theme === 'dark' ? 'outline-active' : ''"
              data-type="dark"
            >
              <span
                class="i-line-md-sunny-filled-loop-to-moon-filled-loop-transition text-2xl theme-text"
              ></span>
            </div>
            <span class="block text-center mt-2 text-sm">深色</span>
          </div>
        </div>
        <div class="item w-1/3 text-center">
          <div class="w-[85%] mx-auto">
            <div
              class="border-gray-800/20 rounded-sm text-center py-5 outline-box theme-option"
              :class="themeStore.theme === 'system' ? 'outline-active' : ''"
              data-type="system"
            >
              <span
                class="i-material-symbols-light-sunny-snowing-rounded text-2xl theme-text"
              ></span>
            </div>
            <span class="block text-center mt-2 text-sm">跟随系统</span>
          </div>
        </div>
      </div>
      <div class="flex justify-between mt-5">
        <span class="text-sm text-gray-500">深色侧边栏</span>
        <el-switch v-model="darkSidebar" />
      </div>
      <div class="flex justify-between mt-5">
        <span class="text-sm text-gray-500">深色顶栏</span>
        <el-switch v-model="darkHeader" @change="" />
      </div>
      <h5 class="py-3">选择主题</h5>
      <div class="flex flex-wrap mt-2">
        <div
          class="item w-1/3"
          v-for="item in ThemesList"
          :key="item.name"
          @click="toggleThemeColor(item.name)"
        >
          <div class="w-[85%] mx-auto mb-3">
            <div
              class="rounded-sm text-center py-2.5 outline-box theme-option"
              :data-theme="item.value"
            >
              <span
                :style="{ 'background-color': item.color }"
                style="width: 25px; height: 25px"
                class="block m-auto rounded-xs"
              ></span>
            </div>
            <span class="block text-center mt-2 text-sm">{{ item.name }}</span>
          </div>
        </div>
      </div>

      <h5 class="py-3">圆角</h5>
      <div class="flex flex-wrap mt-2 justify-between">
        <span
          class="border-1 rounded-sm px-3.5 border-gray-100 cursor-pointer hover:bg-gray-500/10"
          >0</span
        >
        <span
          class="border-1 rounded-sm px-3.5 border-gray-100 cursor-pointer hover:bg-gray-500/10"
          >0.25</span
        >
        <span
          class="border-1 rounded-sm px-3.5 border-gray-100 cursor-pointer hover:bg-gray-500/10"
          >0.5</span
        >
        <span
          class="border-1 rounded-sm px-3.5 border-gray-100 cursor-pointer hover:bg-gray-500/10"
          >0.75</span
        >
        <span
          class="border-1 rounded-sm px-3.5 border-gray-100 cursor-pointer hover:bg-gray-500/10"
          >1</span
        >
      </div>
      <h5 class="py-3 mt-5">其他</h5>

      <div class="flex justify-between mt-2.5 hover:bg-grary-500/10">
        <span class="text-sm text-gray-500">色弱模式</span>
        <el-switch v-model="darkSidebar" />
      </div>
      <div class="flex justify-between mt-2.5">
        <span class="text-sm text-gray-500">灰色模式</span>
        <el-switch v-model="darkHeader" @change="" />
      </div>
    </div>
  </template>
  <template v-if="activeTab === '性能'">性能</template>
  <template v-if="activeTab === '配置'">配置</template>
  <template v-if="activeTab === '通用'">通用</template>
</template>
<style lang="scss" scoped>
.bg-tabbar-theme {
  background-color: var(--bg-color-tabbar);
}
.theme-text {
  color: var(--text-color-primary);
}
.tab-indicator-bar {
  transition: all 0.35s ease-in-out;
  background-color: var(--bg-color-indicator);
}
.outline-box,
s .outline-active {
  position: relative;
  cursor: pointer;
  outline: 1px solid var(--border-color-base);
}
.outline-box::before,
.outline-active::before {
  content: "";
  outline: 2px solid #3b82f6;
  transform: scale(0.5);
  transform-origin: center;
  transition: transform 0.6s ease;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  opacity: 0;
  transition: all 0.6s ease;
}
.outline-box:hover:before,
.outline-active:before {
  transform: scale(1);
  opacity: 1;
}
</style>
